<template>
  <div class="near-site-layout">
    <div class="site-list" v-for="(item,index) in nearSiteList">
      <div class="site-tite clearfix" @click="toList(item)">
        <div class="site fl">
          <i class="icon-bus"></i>
          <span class="name">{{item.stopName}}</span>
          <i class="icon-distance" v-show="index===0"></i>
        </div>
        <div class="distance fr">{{item.distance}}米</div>
      </div>
      <ul class="bus-list">
        <li class="bus-detail" v-for="(item2,index2) in item.lines" @click="toDetail(item2)" v-show="index===0">
          <div class="meg">
            <span class="num">{{item2.lineName}}路</span>
            <span class="start">{{item2.startStopName}}</span>
            <i class="fa fa-long-arrow-right arrow" aria-hidden="true"></i>
            <span class="end">{{item2.endStopName}}</span>
          </div>
          <div class="coming">
            <div>
              <i class="icon-come"></i>
              <span class="come-txt">{{item2.commingBusArray[0].distance}}</span>
            </div>
            <div>
              <i class="icon-come"></i>
              <span class="come-txt">{{item2.commingBusArray[1].distance}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="bus-tool">
      <vBanner :isFresh="nearSiteConfig.isFresh" :isRide="nearSiteConfig.isRide"
               :isBanner="nearSiteConfig.isBanner"></vBanner>
    </div>
    <img src="../../assets/img/nosite.png" class="nosite" v-if="nearSiteList.length===0">
  </div>
</template>
<script>
  import vBanner from '../../components/banner/banner.vue'
  import {showToast, getLocation, getDistance} from '../../utils/public'
  import {nearSite, getDetail} from '../../utils/http'

  export default {
    data() {
      return {
        params: {},
        nearSiteList: []
      }
    },
    components: {vBanner},
    computed: {
      nearSiteConfig() {
        return global.lineConfig.nearSite
      }
    },
    mounted() {
      this.onReady()
    },
    methods: {
      onReady() {
        getLocation((Lng, Lat) => {
          if (Lat && Lng) {
            this.params.latitude = Lat
            this.params.longitude = Lng
            nearSite({
              latitude: this.params.latitude,
              longitude: this.params.longitude,
              cb: (data) => {
                data.forEach((v, i) => {
                  v.distance = this.getDistance(v.lat, v.lng)
                  v.lines.forEach((v2, i2) => {
                    v2.commingBusArray = [{distance: "未发车"}, {distance: "未发车"}]
                    getDetail({
                      lineId: v2.lineId,
                      latitude: this.params.latitude,
                      longitude: this.params.longitude,
                      clickStopName: v.stopName,
                      cb: (data, array) => {
                        v2.commingBusArray = array
                      }
                    })
                  })
                })
                data.sort(data.distance)
                this.nearSiteList = data
              }
            })
          } else {
            showToast('定位失败，暂时无法获取站点信息！')
          }
        })
      },
      toList(item) {
        if (item.lines.length > 0) {
          localStorage.setItem('lineList', JSON.stringify(item))
          this.$router.push({path: '/lineList'})
        }
      },
      toDetail(item) {
        localStorage.setItem('lineDetail', JSON.stringify(item))
        this.$router.push({path: '/lineDetail'})
      },
      getDistance(lat, lng) {
        return getDistance(this.params.latitude, this.params.longitude, lat, lng).toFixed(0)
      }
    }
  }
</script>
<style scoped>
  @import "../../assets/css/nearSite.css";
</style>
